<!-- 查看税收信息 -->
<template>
	<a-modal v-bind="options" class="tax-detail-dialog">
		<a-descriptions :title="detailsData.invOrgName" class="ant-descriptions-blockquote"></a-descriptions>
		<vxe-table border ref="grid" :data="detailsData.taxationItems" :span-method="mergeRowMethod" v-bind="gridOptions">
			<vxe-column field="feeSubjectName" title="费用类型" align="center"></vxe-column>
			<vxe-column field="taxationType" title="计税方式" align="center">
				<template #default="{row, rowIndex}">
					<span>{{ row.taxationType === 1 ? '个人' : '企业' }}</span>
				</template>
			</vxe-column>
			<vxe-column field="taxationPattern" title="计税模式" align="center"></vxe-column>
			<vxe-column field="taxRate" title="税率(%)" align="center"></vxe-column>
			<vxe-column field="taxClassificationCode" align="center" title="税收分类编码"></vxe-column>
			<vxe-column field="preferentialPolicyType" align="center">
				<template #header>
					<a-typography-text type="danger">*</a-typography-text>
					优惠政策
				</template>
			</vxe-column>
		</vxe-table>
		<template #footer>
			<a-button @click="editTaxInformation">编辑</a-button>
			<a-button type="primary" @click="deleteTaxInformation">删除</a-button>
		</template>
	</a-modal>

	<!-- 编辑 -->
	<add-or-upd-tax-information :taxId="taxId" v-model:visible="visibles.addOrEdit" @close="visibles.addOrEdit = false"></add-or-upd-tax-information>
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, defineEmits, watch} from 'vue'
	import {VxeTablePropTypes, VxeGridProps} from 'vxe-table'
	import {Modal} from 'ant-design-vue'
	import {createVNode} from 'vue'
	import {ExclamationCircleFilled} from '@ant-design/icons-vue'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import {financeEneryRecord, energyImport, generateFinance, energyReset} from '@/api/energy'
	import {getTaxRateDetails, deleteTaxRate} from '@/api/tax-rate-list'
	const props = defineProps<{
		visible: boolean
		taxId: string
	}>()

	const visibles = reactive({
		addOrEdit: false
	})

	const detailsData = reactive<any>({
		invOrgId: '',
		tinvOrgName: '',
		taxationItems: []
	})
	const taxId = ref('')

	const emits = defineEmits(['update:visible', 'close'])

	const options = reactive({
		title: '税收信息',
		width: 1300,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		confirmLoading: false,
		visible: toRef(props, 'visible'),
		onCancel() {
			setTimeout(() => emits('close'), 100)
		}
	})

	const grid = ref()

	/**
	 * 单元格配置
	 */
	const gridOptions = reactive<VxeGridProps>({
		rowConfig: {
			isHover: true
		}
	})

	/**
	 * 计算单元格合并
	 */

	const mergeRowMethod: VxeTablePropTypes.SpanMethod = ({row, _rowIndex, column, visibleData}) => {
		const fields = ['feeSubjectName']
		const cellValue = row[column.field]
		if (cellValue && fields.includes(column.field)) {
			const prevRow = visibleData[_rowIndex - 1]
			let nextRow = visibleData[_rowIndex + 1]
			if (prevRow && prevRow[column.field] === cellValue) {
				return {rowspan: 0, colspan: 0}
			} else {
				let countRowspan = 1
				while (nextRow && nextRow[column.field] === cellValue) {
					nextRow = visibleData[++countRowspan + _rowIndex]
				}
				if (countRowspan > 1) {
					return {rowspan: countRowspan, colspan: 1}
				}
			}
		}
	}

	/**
	 * 编辑
	 */
	const editTaxInformation = () => {
		visibles.addOrEdit = true
		emits('close')
	}

	/**
	 * 删除
	 */
	const deleteTaxInformation = () => {
		Modal.confirm({
			centered: true,
			title: () => '删除',
			icon: () => createVNode(ExclamationCircleFilled),
			content: () => '删除之后将无法使用该税收信息进行开票,确定要删除该税收信息吗?',
			okText: () => '确定',
			okType: 'primary',
			cancelText: () => '取消',
			onOk() {
				deleteTaxRate(taxId.value).then(() => {
					emits('close')
				})
			},
			onCancel() {
				console.log('Cancel')
			}
		})
	}
	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				getDetails()
			}
		}
	)
	/**
	 * 获取详情数据
	 */
	const getDetails = () => {
		getTaxRateDetails(props.taxId).then(res => {
			console.log(res)
			taxId.value = res.data.invOrgId
			detailsData.invOrgId = res.data.invOrgId
			detailsData.invOrgName = res.data.invOrgName
			detailsData.taxationItems = res.data.taxationItems.map(e => {
				e.taxRate = e.taxRate ? e.taxRate * 100 : 0
				if (e.taxationPattern === 3) {
					e.taxationPattern = '一般计税'
				} else if (e.taxationPattern === 2) {
					e.taxationPattern = '简易计税'
				} else {
					e.taxationPattern = '计税模式'
				}

				if (e.preferentialPolicyType === 0) {
					e.preferentialPolicyType = '无优惠'
				} else if (e.preferentialPolicyType === 1) {
					e.preferentialPolicyType = '免税'
				} else {
					e.preferentialPolicyType = '不征税'
				}

				return e
			})
		})
	}
</script>

<style lang="less">
	.tax-detail-dialog {
		.ant-modal-body {
			height: 80vh;
			overflow: auto;
		}
	}
</style>
